<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
        input[type="text"], input[type="image"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 10px 0;
            margin: 10px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <table>
        <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名</th>
                <th>商品价格</th>
                <th>商品图片</th>
                <th>商品库存</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(g, i) in goods">
                <td>{{ g.id }}</td>
                <td>{{ g.name }}</td>
                <td>{{ g.price }}</td>
                <td><img :src="g.img" alt="商品图片" style="max-width: 100px; max-height: 100px;"></td>
                <td>{{ g.qty }}</td>
                <td><button type="button" @click="del(i)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <div>
        商品编号: <input type="text" v-model="id" /><br />
        商品名: <input type="text" v-model="name" /><br />
        商品价格: <input type="text" v-model="price" /><br />
        商品图片: <input type="text" v-model="imgSrc" /><br />
        商品库存: <input type="text" v-model="qty" /><br />
        <button @click="add">添加</button>
    </div>
</div>

<script>
var app = Vue.createApp({
    data() {
        return {
            id: '',
            name: '',
            price: '',
            imgSrc: '',
            qty: '',
            goods: [
                {
                    id: 1,
                    name: "iPhone14",
                    price: 8888,
                    img: "./img/iphone14.jpg",
                    qty: 5
                },
                {
                    id: 2,
                    name: "华为mate6",
                    price: 8888,
                    img: "./img/mate40.jpg",
                    qty: 3
                }
            ]
        };
    },
    methods: {
        add: function () {
            if (this.id && this.name && this.price && this.imgSrc && this.qty) {
                var g = {
                    id: parseInt(this.id),
                    name: this.name,
                    price: parseInt(this.price),
                    img: this.imgSrc,
                    qty: parseInt(this.qty)
                };
                this.goods.push(g);
                this.id = '';
                this.name = '';
                this.price = '';
                this.imgSrc = '';
                this.qty = '';
            } else {
                alert("请输入所有必填项");
            }
        },
        del: function (i) {
            if (i >= 0 && i < this.goods.length) {
                this.goods.splice(i, 1);
            } else {
                console.error("无效的索引");
            }
        }
    }
});
var vm = app.mount("#app");
</script>
</body>
</html>